.venue-order-page {
    position: relative;
    font-size: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: px2rem(24px) px2rem(24px) 0;
    box-sizing: border-box;

    .calendar-order-add {
        position: fixed;
        z-index: 2;
        bottom: px2rem(90px);
        right: px2rem(24px);
        width: px2rem(100px);
        height: px2rem(100px);
        border-radius: px2rem(100px);
        background: url('images/order/add.png') no-repeat no-repeat center center;
        background-size: 100% auto;
        transition: right 0.3s;
    }
    .calendar-order-add.collect {
        right: -px2rem(80px);
        opacity: 0.3;
    }
    .sort-form {
        position: absolute;
        top: px2rem(144px);
        left: 0;
        right: 0;
        bottom: 0;

        .ui-tab-container,
        .ui-tab-container .ui-tab-item {
            position: relative;
            height: 100%;
            top: 0;
        }
        .sort_section {
            padding: 0;
            margin: 0 px2rem(50px);
        }
    }
    .ui-sort-tab {
        .ui-tab-title {
            display: none;
        }

        .ui-tab-container {

        }
    }

    .venue-odrer-top {
        height: px2rem(120px);
        line-height: px2rem(120px);
        position: relative;
        font-size: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 0 px2rem(30px);
        box-sizing: border-box;
        background: #fff;
        border-radius: px2rem(16px) px2rem(16px) 0 0;

        .left-wrap {
            overflow: hidden;
            flex: 1;

            .venue {
                font-size: px2rem(32px);
                white-space: nowrap;
                overflow: hidden;
                max-width: 100%;
                .select-text {
                    display: inline-block;
                }
            }
            .venue:before {
                content: ' ';
                display: inline-block;
                vertical-align: text-top;
                width: px2rem(36px);
                height: px2rem(36px);
                background: url('images/order/position.png') center no-repeat;
                background-size: 100% auto;
            }
        }
        .title-wrap {
            flex: 2;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            strong {
                display: inline-block;
                vertical-align: middle;
                font-size: px2rem(48px);
            }
            .help {
                display: inline-block;
                vertical-align: middle;
                width: px2rem(32px);
                height: px2rem(32px);
                margin-left: px2rem(8px);
                background: url('images/svg/help.svg') center no-repeat;
                background-size: 100% auto;
            }
        }
        .right-wrap {
            font-size: 0;
            text-align: right;
            flex: 1;

            span {
                display: inline-block;
                vertical-align: middle;
                width: px2rem(56px);
                height: px2rem(56px);
                margin-left: px2rem(10px);
                font-size: 0;
            }
            span.search {
                background: url('images/order/search.png') center no-repeat;
                background-size: px2rem(36px) auto;
            }
            span.filter {
                background: url('images/order/filter.png') center no-repeat;
                background-size: px2rem(36px) auto;
            }
        }
    }
    .month-head {
        position: absolute;
        top: px2rem(120px);
        left: px2rem(24px);
        right: px2rem(24px);
        z-index: 1;
    }
    .date-form {
        display: block;
        padding-bottom: px2rem(32px);
        border-radius: 0 0 px2rem(16px) px2rem(16px);
        background: #fff;
    }
    .ui-monthview {
        width: 100%;

        table {
            width: 100%;
            border-width: 0;
            border-collapse: separate;
            border-spacing: 0px 0px;
            padding: 0;

            tbody {
                display: block;
                overflow-y: hidden;
                overflow-x: hidden;
                position: relative;
            }
            thead {
                tr {
                    td {
                        height: px2rem(62px);
                        line-height: px2rem(62px);
                        font-size: px2rem(26px);
                    }
                }
            }
            tr {
                display: block;
                text-align: center;
                font-size: 0;

                td {
                    position: relative;
                    display: inline-block;
                    width: px2rem(96px);
                    height: px2rem(96px);
                    line-height: px2rem(66px);
                    border-radius: px2rem(96px);
                    font-size: px2rem(36px);
                }
                td:hover {
                    background: none;
                }
                td.ui-extra {
                    visibility: hidden;
                }
                td.ui-monthview-date-selected {
                    background: #FBAE38;
                    color: #fff;
                }
                td.preview:before {
                    content: '预';
                    font-size: px2rem(18px);
                    color: #FBAE38;
                    position: absolute;
                    top: px2rem(20px);
                    left: px2rem(6px);
                    width: px2rem(22px);
                    height: px2rem(22px);
                    line-height: px2rem(22px);
                }
                td.type-1,
                td.type-2,
                td.type-3 {
                    color: #F55937;
                    white-space: nowrap;
                }
                td.small {
                    font-size: px2rem(24px);
                }
                td.count-1:after,
                td.count-2:after,
                td.count-3:after,
                td.count-4-9:after,
                td.count-10-19:after,
                td.count-max:after {
                    content: ' ';
                    position: absolute;
                    display: inline-block;
                    width: px2rem(12px);
                    height: px2rem(12px);
                    border-radius: px2rem(12px);
                    left: px2rem(42px);
                    bottom: px2rem(4px);
                }
                td.count-1:after {
                    background-color: #00A2E7;
                }
                td.count-2:after {
                    background-color: #019946;
                }
                td.count-3:after {
                    background-color: #f1f300;
                }
                td.count-4-9:after {
                    background-color: #f49900;
                }
                td.count-10-19:after {
                    background-color: #e80111;
                }
                td.count-max:after {
                    background-color: #930885;
                }
                td:after {
                    content: attr(data-count);
                    font-size: px2rem(20px);
                    color: #999999;
                    position: absolute;
                    left: 0;
                    bottom: px2rem(10px);
                    width: 100%;
                    height: px2rem(28px);
                    line-height: px2rem(28px);
                    text-align: center;
                }
                td.ui-monthview-date-selected:before,
                td.ui-monthview-date-selected:after {
                    color: #FFF;
                }
            }
            tr.ui-extra {
                display: none;
            }
        }
    }
    .info {
        position: relative;
        background-color: #fff;
        padding: px2rem(30px);
        margin-top: px2rem(24px);
        border-radius: px2rem(16px);

        .title {
            font-size: px2rem(36px);
            height: px2rem(54px);
            line-height: px2rem(54px);
            font-weight: bold;
            color: #333333;
            margin-bottom: px2rem(20px);
        }
        .info-cont {
            font-size: 0;
                
            .info-item {
                display: inline-block;
                vertical-align: top;
                width: 26%;
                font-size: px2rem(26px);

                .label {
                    display: block;
                    height: px2rem(46px);
                    line-height: px2rem(46px);
                    font-size: px2rem(28px);
                    color: #A9A9A9;
                }
                .info-num {
                    padding: 0 px2rem(6px);
                    font-size: px2rem(60px);
                    font-weight: 500;
                    height: px2rem(66px);
                    line-height: px2rem(66px);
                    color: #FBAE38;

                    &::after {
                        content: '场';
                        font-size: px2rem(30px);
                    }
                }
            }
            .line {
                display: inline-block;
                vertical-align: top;
                width: px2rem(2px);
                height: px2rem(30px);
                background: #EBEBEB;
                margin-top: px2rem(26px);
                margin-right: px2rem(60px);
                margin-left: px2rem(40px);
            }
        }
    }
    .venue-order-list-view {
        position: relative;
        flex: 1;

    }
}